<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width:45%;">
        <el-form :model="addPaymentForm" ref="addBaseTaskRef" :rules="addPaymentrules">
            <el-form-item label="缴费类型" :label-width="formLabelWidth" prop="name">
                <el-radio-group v-model="addPaymentForm.type">
                    <el-radio :value="1">非税收费</el-radio>
                    <el-radio :value="2">微信收费</el-radio>
                    <el-radio :value="3">东校区非税收费</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="任务名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="addPaymentForm.name" autocomplete="off" ref="name" placeholder="请填写任务名称"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";
import { API_BASE_NAME2, API_BASE_NAME3 } from '../../constants';

export default {
    name: "AddBaseAddress",
    components: { ElForm, ElMessage },
    data() {
        return {
            campusName: API_BASE_NAME2,
            campusName1: API_BASE_NAME3,
            dialogFormVisible: ref(false),
            formLabelWidth: "80px",
            title: "",
            personnelType: "",
            id: '',
            teacherList: [],
            addPaymentForm: {
                id: "",
                name: '',
                type: "",
                sortNum: '',
                isEffect: '1',
            },
            // 校验规则
            addPaymentrules: {
                name: vxRule(true, null, "blur"),
                sortNum: vxRule(true, null, "blur"),
                isEffect: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        changehandler(value) {
            console.log(value);
        },
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },

        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addPaymentForm.id = ""
            this.addPaymentForm.name = ''
            this.addPaymentForm.sortNum = ''
            this.addPaymentForm.isEffect = '1'
            this.title = ""
            this.id = ""

        },
        save() {

            this.$refs.addBaseTaskRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("name", this.addPaymentForm.name);
                    params.append("sortNum", this.addPaymentForm.sortNum);
                    params.append("isEffect", this.addPaymentForm.isEffect);

                    if (this.id) {
                        params.append("id", this.id);
                        httpService("/javaApi/paymentType/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    this.$parent.getStudentPayList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/paymentType/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    this.$parent.getStudentPayList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style></style>